import 'package:flutter/material.dart';
import 'package:netstorage/utils/navigator_utils.dart';
import 'package:webview_flutter/webview_flutter.dart';
// H5 WebView
class HiWebview extends StatefulWidget {
  final String? url;
  final String? statusBarColor;
  final String? title;
  final bool? hideAppBar;
  final bool? backForbid;// 禁止返回按钮
  const HiWebview({super.key, this.url, this.statusBarColor, this.title, this.hideAppBar, this.backForbid});

  @override
  State<HiWebview> createState() => _HiWebviewState();
}

class _HiWebviewState extends State<HiWebview> {
  final _catchUrls = ['m.ctrip.com/','m.ctrip.com/html5/','m.ctrip.com/html5'];
  String? url;
  late WebViewController controller;
  @override
  void initState() {
    super.initState();
    url = widget.url;
    if(url != null && url!.contains('ctrip.com')){
      url = url!.replaceAll('http://', 'https://');
    }
    // _initWebViewController会用到 url
    // 需要在前面初始化 url
    _initWebViewController();
  }

  @override
  Widget build(BuildContext context) {
    String statusBarColorStr = widget.statusBarColor ?? 'ffffff';
    Color backButtonColor;
    if(statusBarColorStr == 'ffffff') backButtonColor = Colors.black;
    else backButtonColor = Colors.white;
    return PopScope(
      // 阻止 android 物理返回键的默认行为（默认退出app）
      // 修改为返回 webview 的上一页：
      // 在 webview 页面中点击进入子页面后通过物理返回按键退回到 webview 的首页
      // 这里的设置会导致物理回退按钮只能在 webview 中使用，来返回上一页
      // 当处于 webview 首页时无法通过物理返回按键退出 app
      // 需要加工导航工具类方法 navigator_utils.dart # pop 来实现可退出 app 的功能
      canPop: false,
      onPopInvoked: (bool didPop) async {
        if(await controller.canGoBack()){
          controller.goBack();
        }else{
          // flutter官方不推荐在 async 中使用 context
          // 这里通过 context.mounted 判断页面已加载时才使用 context
          // 避免内存泄露
          if(context.mounted) NavigatorUtils.pop(context);
        }
      },
      child: Scaffold(
        body: Column(
          children: [
            _appBar(Color(int.parse('0xff$statusBarColorStr')), backButtonColor),
            // webview 填充 appBar 之外的所有剩余空间
            Expanded(
              child: WebViewWidget(controller: controller),
            )
          ]
        ),
    ));
  }

  void _initWebViewController() {
    // 这里的两个点语法糖表示沿用前面的主体，即 .. = controller.
    controller = WebViewController()
    ..setJavaScriptMode(JavaScriptMode.unrestricted)
        ..setBackgroundColor(const Color(0x00000000))
        ..setNavigationDelegate(NavigationDelegate(
          onProgress: (int progress){
            print('progress:$progress');
          },
          onPageStarted: (String url){},
          onPageFinished: (String url){// 页面加载完毕后再执行 js
            _handleBackForbid();
            // AI给出的禁用输入预测功能，实测无效
            // 使用 runJavaScript 替代 evaluateJavascript
            // controller.runJavaScript('''
            //   var style = document.createElement('style');
            //   style.innerHTML = '*{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}';
            //   document.head.appendChild(style);
            // ''');
          },
          onWebResourceError: (WebResourceError err){},// 当 webview 中报错/报异常时会进入该回调函数
          onNavigationRequest: (NavigationRequest req){// webview 中跳转url的回调，可制作路由守卫
            final url = req.url ?? '';
            if(url.length == 0) {
              print('没有URL，要返回上一页');
              return NavigationDecision.prevent;
            }

            if(_is2Main(url)){
              print('是特定网址，即将跳转到主页');
              NavigatorUtils.pop(context);// 跳转到主页
              return NavigationDecision.prevent;
            }
            print('经过路由守卫，即将跳转到：$url');
            return NavigationDecision.navigate;
          }
        ))
    ..loadRequest(Uri.parse(url!));
  }

  void _handleBackForbid(){

  }

  bool _is2Main(String url) {
    bool isContain = false;
    // for(var item in _catchUrls){
    //   if(url.contains(item)){
    //     isContain = true;
    //     break;
    //   }
    // }
    for(final val in _catchUrls){
      if(url?.endsWith(val) ?? false){
        isContain = true;
        break;
      }
    }
    return isContain;
  }

  _appBar(Color backgroundColor, Color backButtonColor){
    double top = MediaQuery.of(context).padding.top;
    // 如果隐藏 appBar 则返回一个带有安全边距的 Container
    if(widget.hideAppBar ?? false){
      return Container(color: backgroundColor, height: top);
    }

    return Container(
      color: backgroundColor,
      padding: EdgeInsets.fromLTRB(0, top, 0, 10),// 上面有安全边距，下面有自定义内边距
      child: FractionallySizedBox(
        widthFactor: 1,// 宽度充满屏幕
        child: Stack(
          children: [
            _backButton(backButtonColor),
            _title(backButtonColor)
          ],
        ),
      ),
    );
  }

  _title(Color backButtonColor) {
    return Positioned(// 左右0并使用 Center 显示居中的文本
        left: 0, right: 0,
        child: Center(
          child: Text(widget.title ?? '', style: TextStyle(color: backButtonColor,fontSize: 20),),
        )
    );
  }
  // 返回按钮
  _backButton(Color backButtonColor){
    return GestureDetector(
      child: Container(
        margin: const EdgeInsets.only(left: 10),
        child: Icon(Icons.close, color: backButtonColor, size: 26,),
      ),
      onTap: () {
        NavigatorUtils.pop(context);
      },
    );
  }
// end class
}
